<template>
  <div>
    <h1>{{info}}</h1>
    <!-- <h2>{{title}}</h2> -->
    <!-- <ul>
      <li v-for="item in lists" :key="item.id">{{item.id}}----{{item.title}}</li>
    </ul>-->
    <!-- 需求：添加id为2的detail  -->
    <button @click="addDetail">添加id为2的detail</button>
    <!-- <CartoonListDetail :lists="lists" :title="title" /> -->
    <CartoonListDetail :addDetailinfo="addDetailinfo" :title="title" />
  </div>
</template>

<script>
import CartoonListDetail from "./CartoonListDetail";

// view模板中的数据来源 data props computed
export default {
  name: "CartoonList",
  /* 
  props格式
  ①props:["lists", "title"] 只指定属性名，属性名放到数组中
  ②
  props: {
    lists: {
      type: Array
    }
  }
  props是对象，传递过来的属性格式 指定属性名 属性值的类型  值的类型 String Number  Boolean Array Object Date Function Symbol
  ③
  props: {
    lists: {
      type: Array,
      required: true
    }
  }
  指定属性名 属性值 属性的必要性
  
  */
  /* props: {
    lists: {
      type: Array
    }
  }, */
  //   props: ["lists", "title"],
  /* 
  不要修改props中的值，若想改变，请在组件设置初始化数据接收该值，再进行改变
  当props为基本数据类型时会报错，当为引用数据类型时不会报错
  由于该种做法违背了组件之间传值单项数据流的概念
  */
  props: {
    lists: {
      type: Array
      //   required: true
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      info: "子组件",
      addDetailinfo: []
    };
  },

  components: {
    CartoonListDetail
  },

  computed: {},
  created() {
    console.log(this.lists);
  },
  beforeMount() {
    console.log(this.lists);
  },

  mounted() {},

  methods: {
    addDetail() {
      console.log(this.lists);
      //拿到对象直接添加
      /*   this.lists[1].detail = {
        name1: "呱唧",
        name2: "皮医生",
        name3: "队长"
      };
      console.log(this.title);
      this.title = "xx"; */
      // 数组与数组合并
      //   this.addDetailinfo.concat(this.lists);
      this.addDetailinfo = this.lists;
      this.addDetailinfo[2].detail = {
        name: "佩奇",
        name1: "乔治",
        name2: "猪妈妈"
      };
      console.log(this.addDetailinfo);
    }
  },

  watch: {}
};
</script>
<style lang='' scoped>
</style>